Vue 组件中的data为什么是一个函数? 您所在的位置:网站首页 为什么vue data必须是函数 Vue 组件中的data为什么是一个函数?

Vue 组件中的data为什么是一个函数?

2024-07-16 01:53| 来源: 网络整理| 查看: 265

1.前言

在学习Vue的时候,发现组件中的data 是函数返回的形式,而挂载的实例中的data一般都是简单的对象格式,带着问题查了查文档,下面给出例子和解释。

2.正文 这里有一个 Vue 组件的示例:data 必须是一个函数 // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: 'You clicked me {{ count }} times.' })

组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:

因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

data 必须是一个函数

当我们定义这个 组件时,你可能会发现它的 data 并不是像这样直接提供一个对象:

data: { count: 0 }

取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:

data: function () { return { count: 0 } }

如果 Vue 没有这条规则,点击一个按钮就会影响到其它所有的实例

3.总结

组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。

 


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有